<template>
	<div id="app">
		<el-header>
			<el-menu :default-active="index" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
				<h1 id="tit">竹 林 餐 饮</h1>
				<el-menu-item index="4" style="float: right;">退出登录</el-menu-item>
				<el-menu-item index="3" style="float: right;">服务人员管理</el-menu-item>
				<el-menu-item index="2" style="float: right;"><router-link @click="index='2'" to="/bill" style="display: block;">菜品管理</router-link></el-menu-item>
				<el-menu-item index="1" style="float: right;"><router-link to="/" style="display: block;">工作台</router-link></el-menu-item>
			</el-menu>
		</el-header>
		<el-main>
			<router-view></router-view>
		</el-main>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				index:"1"
			}
		}
	}
</script>

<style lang="less">
*{margin: 0;padding: 0;}
a{
	text-decoration: none;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#tit{
	margin-left: 30%;
	float: left;
	color: #fff;
	line-height: 60px;
}
#tit:focus{
	outline:none;
}
</style>
